<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置table的tbody</title>
</head>
<body>
    <script type="text/javascript">
        // 模拟收到 JSON 数据
        var data = {
            "total" : 4,
            "emps" : [
                {"empno" : 7712, "ename" : "张三", "sal" : 2000},
                {"empno" : 7713, "ename" : "李四", "sal" : 2000},
                {"empno" : 7714, "ename" : "王五", "sal" : 2000},
                {"empno" : 7715, "ename" : "赵六", "sal" : 2000}
            ]
        };
        // 希望把 JSON 对象展示到 table 中

        window.onclick = function () {
            var displayBtnElt = document.getElementById("displayBtn");
            displayBtnElt.onclick = function () {
                var html = "";
                var emps = data.emps;
                for (var i in emps) {
                    var emp = emps[i];
                    html += "<tr>";
                    html += "<td>" + emp.empno + "</td>";
                    html += "<td>" + emp.ename + "</td>";
                    html += "<td>" + emp.sal + "</td>";
                }
                document.getElementById("empTbody").innerHTML = html;
                document.getElementById("count").innerHTML = data.total;
            }
        }
    </script>

    <h2>员工列表信息</h2>
    点击这个按钮, 将后台的JSON解析出来, 放在表格中
    <input type="button" value="显示员工信息" id="displayBtn"/>

    <hr/>
    <table border="1px" width="50%">
        <tr>
            <th>员工编号</th> <th>员工姓名</th> <th>员工工资</th>
        </tr>
        <tbody id="empTbody">
<!--            <tr>-->
<!--                <td>7712</td> <td>张三</td> <td>2000</td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>7713</td> <td>李四</td> <td>2000</td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>7714</td> <td>王五</td> <td>2000</td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>7715</td> <td>赵六</td> <td>2000</td>-->
<!--            </tr>-->
        </tbody>
    </table>
    总共<span id="count">0</span>条数据.
</body>
</html>